<template>
  <!-- 头部 -->
  <view class="navbar" :style="[style]">
    <view class="navbar-logo">
      <uv-image src="/static/img/index.png" width="39px" height="39px"></uv-image>
    </view>
    <view class="navbar-logo">
      <uv-image src="/static/img/logo-zh.png" width="51px" height="51px"></uv-image>
    </view>
  </view>
</template>

<script setup>
  import { reactive, ref, computed } from 'vue';
  let style = computed(() => {
    const style = {};
    // 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
    style.top = uni.$uv.addUnit(uni.$uv.sys().statusBarHeight + 5, 'px');
    return uni.$uv.deepMerge(style);
  });
</script>

<style lang="scss" scoped>
  .navbar {
    background-color: #fff;
    height: $dance-navbar-height;
    display: flex;
    align-items: center;
    padding: 0 29.651rpx;
    margin-bottom: 19.186rpx;
    z-index: 2;
    &-logo {
      margin-right: 12.209rpx;
    }
  }
</style>
